
/**
 * 用例表单
 * @type {{template: string, data(): {jsonData: string, dialogVisible: boolean, size: null, caseVO: [], caseId: null}, methods: {executeCase(): void, isJson(): Promise<null>, handleClose(*): void, caseJson(): void, watchStep(*, *): void, doExecuteClick(*, *): Promise<void>}, created(): void}}
 */
const caseList = {
    template:
        `
    <div>
        <el-table :data="caseVO" style="width: 100%;" max-height="100%" @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column fixed prop="caseId" label="用例编号" width="150">
            </el-table-column>
            <el-table-column prop="caseName" label="用例名称" width="120">
            </el-table-column>
            <el-table-column prop="caseDetail" label="用例详情" width="230">
            </el-table-column>
            <el-table-column prop="caseUrl" label="用例URL" width="150">
            </el-table-column>
            <el-table-column prop="admUserId" label="创建者ID" width="120">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable width="160">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" sortable width="160">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button @click.native.prevent="doExecuteClick(scope.$index, caseVO)" type="text" size="small">
                        执行
                    </el-button>
                    <el-button @click.native.prevent="watchStep(scope.$index, caseVO)" type="text" size="small">
                        查看
                    </el-button>
                    <el-button @click.native.prevent="updateCase(scope.$index, caseVO)" type="text" size="small">
                        编辑
                    </el-button>
                    <el-button @click.native.prevent="deleteCase(scope.$index, caseVO)" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="pageParams.total"
          :current-page.sync="pageParams.page" :page-size="pageParams.pageSize"
          @current-change="toPage" @prev-click="toPage" @next-click="toPage">
        </el-pagination>
        <el-button type="danger" style="margin-top: 10px;" size="small" v-show="selectionSize" round @click.prevent="deleteAll">删除</el-button>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span style="line-height: 10px">请输入Json对象(需对应用例步骤的jsonpath)</span>
          <el-input
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 100}"
              :append-to-body="true"
              :rows="6"
              placeholder="请输入Json对象"
              v-model="jsonData">
          </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="caseJson">确 定</el-button>
          </span>
        </el-dialog>
    </div>
     `,
    data() {
        return {
            pageParams:{   //分页参数实体
                page: 1,
                total: 100,
                pageSize: 8
            },
            dialogVisible: false,   //模态框显示
            caseVO:[], //用例列表
            jsonData: null, //json对象，传到后端
            caseId: null,  //用例id
            size: null, //用于判断当前用例是否有需要输入的步骤
            search: null, //搜索框的关键字
            caseSelection: [],   //选中的用例存放在该数组，可直接用于请求后端进行批量删除操作
            caseDel: [] //单个删除
        };
    },
    computed:{
        //用于显示批量删除按钮
        selectionSize:function () {
            return this.caseSelection.length > 0;
        }
    },
    methods: {
        //表格多选
        handleSelectionChange(val) {
            this.caseSelection = val;
        },
        //批量删除
        deleteAll(){
            http.delete('/mf/cases', this.caseSelection).then(res => {
                if (res.data.code){
                    this.$notify.info({
                        title: '结果通知',
                        message: res.data.message
                    });

                }
                setTimeout(() => {
                    window.location.reload()
                }, 1500);
            })
        },
        //判断是否需要进行输入json数据再执行测试用例
        async isJson(){
            let length = null
            await http.get('/mf/cases/'+ this.caseId + '/size').then(res => {
                length = res.data.data.size
            })
            return length;
        },
        //执行测试用例
        executeCase(){
            if (this.jsonData != null){
                this.jsonData.replace(" ", "")
                this.jsonData = JSON.parse(this.jsonData)
            }
            http.post('/mf/cases/' + this.caseId, this.jsonData).then(res => {
                this.jsonData = null;
                if (res.data.code === 200){
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                }else {
                    this.$message.error(res.data.message)
                }

            })
        },
        //点击执行按钮操作
        async doExecuteClick(index, rows){
            this.caseId = rows[index].caseId
            await this.isJson().then(r => {
                this.size = r
            })
            if (this.size != null && this.size > 0){
                this.dialogVisible = true
            }else{
                this.executeCase()
            }
        },
        //输入完json后点击确定
        caseJson(){
            this.dialogVisible = false
            this.executeCase()
        },
        //查看用例步骤
        watchStep(index, rows){
            localStorage.setItem("caseId", rows[index].caseId)
            localStorage.setItem("caseName", rows[index].caseName)
            this.$router.push({path:"/case-step"})
        },
        //修改测试用例
        updateCase(index, rows){
            localStorage.setItem("caseId", rows[index].caseId)
            localStorage.setItem("caseName", rows[index].caseName)
            localStorage.setItem("caseUrl", rows[index].caseUrl)
            localStorage.setItem("caseDetail", rows[index].caseDetail)
            this.$router.push({path:"/case/detail"})
        },
        //删除单个用例
        deleteCase(index, rows){
            this.caseDel.push(rows[index])
            http.delete('/mf/cases', this.caseDel).then(res => {
                if (res.data.code){
                    this.$notify.info({
                        title: '结果通知',
                        message: res.data.message
                    });
                }
                setTimeout(() => {
                    window.location.reload()
                }, 1500);
            })
        },
        //关闭模态框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //页数变化
        toPage(val){
            this.pageParams.page = val
            http.get('/mf/user/'+ 100101 +'/cases?page=' + val).then(res => {
                if (res.data.code === 200){
                    this.caseVO = res.data.data.caseVOS;
                }
            })
        }
    },
    mounted(){
        //请求后端查询所有测试用例
        http.get('/mf/user/'+ 100101 +'/cases').then(res => {
            if (res.data.code === 200){
                this.caseVO = res.data.data.caseVOS;
                this.pageParams.total = res.data.data.total;
            }
        })
    }
}

/**
 * 修改用例信息表单
 */
const updateCaseForm = {
    template:
    `
    <div>
        <el-page-header style="line-height: 50px" @back="goBack" content="修改测试用例信息">
        </el-page-header>
        <el-form :model="caseForm" :rules="rules" ref="caseForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用例名称" prop="caseName">
                <el-input v-model="caseForm.caseName"></el-input>
            </el-form-item>
            <el-form-item label="用例URL" prop="caseUrl">
                <el-input v-model="caseForm.caseUrl"></el-input>
            </el-form-item>
            <el-form-item label="用例详情" prop="caseDetail">
                <el-input type="textarea" v-model="caseForm.caseDetail"></el-input>
            </el-form-item>
            <el-button type="primary" @click="updateForm('caseForm')">修改</el-button>
        </el-form>
    </div>
    `,

    data() {
        return {
            caseForm: {
                caseId: localStorage.getItem("caseId"),
                caseName: localStorage.getItem("caseName"),
                caseUrl: localStorage.getItem("caseUrl"),
                caseDetail: localStorage.getItem("caseDetail")
            },
            rules: {
                caseName: [
                    { required: true, message: '请输入用例名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                caseUrl: [
                    { required: true, message: '请输入用例起始网页URL', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        //返回上一级
        goBack(){
            this.$router.push({path:"/cases"});
        },
        updateForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //请求后端
                    http.put('/mf/cases', this.caseForm).then(res => {
                        if (res.data.code === 200){
                            this.$message({
                                message: '修改测试用例成功',
                                type: 'success'
                            });
                            setTimeout(() => {
                                this.$router.push({path:'/cases'})
                            }, 1000);
                        }else{
                            this.$message.error("修改失败")
                            return false
                        }
                    })
                } else {
                    //提交表单失败
                    this.$message.error('提交表单出错，请确认信息已填写完整');
                    return false;
                }
            });
        },
    },
}

/**
 * 添加用例表单
 */
const caseForm = {
    template:
        `
    <div>
        <h2 style="text-align:center;">添加测试用例</h2>
        <el-form :model="caseForm" :rules="rules" ref="caseForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用例名称" prop="caseName">
                <el-input v-model="caseForm.caseName"></el-input>
            </el-form-item>
            <el-form-item label="用例URL" prop="caseUrl">
                <el-input v-model="caseForm.caseUrl"></el-input>
            </el-form-item>
            <el-form-item label="用例详情" prop="caseDetail">
                <el-input type="textarea" v-model="caseForm.caseDetail"></el-input>
            </el-form-item>
            <el-button type="primary" @click="submitForm('caseForm')">立即创建</el-button>
            <el-button @click="resetForm('caseForm')">重置</el-button>
        </el-form>
    </div>`,
    data() {
        return {
            caseForm: {
                caseName: '',
                caseUrl: '',
                caseDetail: '',
                admUserId: 100101
            },
            rules: {
                caseName: [
                    { required: true, message: '请输入用例名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                caseUrl: [
                    { required: true, message: '请输入用例起始网页URL', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //请求后端
                    http.put('/mf/case', this.caseForm).then(res => {
                        if (res.data.code){
                            this.$message({
                                message: '创建测试用例成功',
                                type: 'success'
                            });
                            this.$router.push({path:"/cases"})
                        }
                    })
                } else {
                    //提交表单失败
                    this.$message.error('提交表单出错，请确认信息已填写完整');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },

}

/**
 * 用例步骤
 * @type {{template: string}}
 */
const caseStep = {
    template:
        `
    <div>
        <div style="margin-left: 10px">
            <el-page-header style="line-height: 60px" @back="goBack" content="用例步骤表">
            </el-page-header>
            <h4>所属用例ID：<span v-text="form.caseId"></span>，用例名称：<span v-text="caseName"></span></h4>
            <span>
                <el-button type="primary" style="line-height: 20px" @click.prevent="showAddStepForm" size="medium" round>添加步骤</el-button>
                <el-button type="danger" style="line-height: 20px" v-show="isDelBtn" @click.prevent="deleteAllStep" size="medium" round>删除步骤</el-button>
            </span>
        </div>
        <el-table :data="stepList" style="width: 100%;" max-height="100%"  @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column fixed prop="stepId" label="步骤序号" width="80">
            </el-table-column>
            <el-table-column prop="stepName" label="步骤名称" width="120">
            </el-table-column>
            <el-table-column prop="stepXpath" label="Xpath表达式" width="300">
            </el-table-column>
            <el-table-column prop="stepOperation" label="步骤的操作" width="100">
            </el-table-column>
            <el-table-column prop="stepRelation" label="关联步骤" width="60">
            </el-table-column>
            <el-table-column prop="stepAmount" label="操作次数" width="60">
            </el-table-column>
            <el-table-column prop="stepJsonpath" label="Jsonpath表达式" width="120">
            </el-table-column>
            <el-table-column prop="isInput" :formatter="formatBoolean" :show-overflow-tooltip="true" label="是否需要输入" width="80">
            </el-table-column>
            <el-table-column prop="expectResult" label="预期结果" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="160">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">    
                <template slot-scope="scope">
                    <el-button @click.native.prevent="" type="text" size="small">
                        编辑
                    </el-button>
                    <el-button @click.native.prevent="deleteStep(scope.$index, stepList)" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="pageParams.total"
          :current-page.sync="pageParams.page" :page-size="pageParams.pageSize"
          @current-change="toPage" @prev-click="toPage" @next-click="toPage">
        </el-pagination>
        <!-- 添加用例步骤模态框 -->
        <el-dialog
          title="添加用例步骤"
          :visible.sync="dialogVisible"
          width="80%"
          :before-close="handleClose">
          <el-form ref="form" :model="form" :rules="rules"  label-width="100px">
              <el-form-item label="步骤序号" prop="stepId">
                <el-input v-model="form.stepId"></el-input>
              </el-form-item>
              <el-form-item label="步骤名称" prop="stepName">
                <el-input v-model="form.stepName"></el-input>
              </el-form-item>
              <el-form-item label="Xpath表达式" prop="stepXpath">
                <el-input v-model="form.stepXpath"></el-input>
              </el-form-item>
              <el-form-item label="步骤操作" prop="stepOperation">
                <el-select v-model="form.stepOperation" placeholder="请选择操作">
                  <el-option label="点击" value="CLICK"></el-option>
                  <el-option label="双击" value="DOUBLE_CLICK"></el-option>
                  <el-option label="点击支付(输入支付密码后支付按钮的点击)" value="PAY_CLICK"></el-option>
                  <el-option label="判断文本值" value="JUDGE_VALUE"></el-option>
                  <el-option label="获取文本值" value="GET_VALUE"></el-option>
                  <el-option label="输入" value="INPUT"></el-option>
                  <el-option label="右击" value="RIGHT_CLICK"></el-option>
                  <el-option label="拖拽" value="DRAG"></el-option>
                  <el-option label="进入iframe表单" value="TO_IFRAME"></el-option>
                  <el-option label="退出iframe表单" value="ESC_IFRAME"></el-option>
                  <el-option label="点击canvas画布" value="TO_CANVAS"></el-option>
                  <el-option label="模拟键盘操作（未完工，需优化）" value="TO_CANVAS"></el-option>
                  <el-option label="跳转到某个窗口（未完工）" value="SWITCH_WINDOW"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关联步骤">
                <el-input v-model="form.stepRelation"></el-input>
              </el-form-item>
              <el-form-item label="操作次数" prop="stepAmount">
                <el-input v-model="form.stepAmount"></el-input>
              </el-form-item>
              <el-form-item label="Jsonpath表达式">
                <el-input v-model="form.stepJsonpath"></el-input>
              </el-form-item>
              <el-form-item label="是否需要输入" prop="isInput">
                <el-select v-model="form.isInput" placeholder="请选择">
                  <el-option label="true" value="true"></el-option>
                  <el-option label="false" value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="预期结果" prop="expectResult">
                <el-input v-model="form.expectResult"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addCaseStep('form')">添 加</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="resetForm('ruleForm')">重 置</el-button>
              </el-form-item>
          </el-form>
        </el-dialog>
    </div>`,

    data() {
        return {
            dialogVisible: false,
            stepSelection: [], //存放选中的步骤，用于执行批量操作
            step: [],  //单个删除，与批量删除同一接口
            stepList: [],
            pageParams:{   //分页参数实体
                page: 1,
                total: 100,
                pageSize: 8
            },
            caseName: localStorage.getItem("caseName"), //用例名字
            form: { //步骤表单
                stepId: '',
                stepName: '',
                stepXpath: '',
                stepOperation: '',
                stepRelation: null,
                stepAmount: 1,
                stepJsonpath: null,
                expectResult: 'TRUE',
                isInput: false,
                caseId: localStorage.getItem("caseId")
            },
            rules: {
                stepId: [
                    { required: true, message: '请输入步骤序号', trigger: 'blur'},
                ],
                stepName: [
                    { required: true, message: '请输入步骤名称', trigger: 'blur' },
                ],
                stepXpath: [
                    { required: true, message: '请输入xpath表达式', trigger: 'blur' },
                ],
                stepOperation: [
                    { required: true, message: '请选择步骤操作', trigger: 'change' }
                ],
                isInput: [
                    { required: true, message: '请选择是或否', trigger: 'change' }
                ],
                stepAmount: [
                    { required: true, message: '请输入操作次数', trigger: 'blur' }
                ],
                expectResult: [
                    { required: true, message: '请输入预期结果', trigger: 'blur' }
                ],
            }
        }
    },

    computed:{
    //根据选择的操作自动更改是否需要输入的选项（此代码未成功实现）
    //     is_input:function (){
    //         console.log(this.form.stepOperation)
    //         if (this.form.stepOperation != null && this.form.stepOperation !== ''){
    //             this.form.isInput = this.form.stepOperation === 'DRAG' || this.form.stepOperation === 'INPUT';
    //         }
    //     },
        isDelBtn:function (){
            return this.stepSelection.length > 0
        }
    },
    methods: {
        //获取选中的用例步骤
        handleSelectionChange(val){
            this.stepSelection = val
        },
        //批量删除用例步骤
        deleteAllStep(){
            this.deleteStepApi(this.stepSelection)
        },
        //单个删除用例步骤
        deleteStep(index, rows){
            this.step.push(rows[index])
            this.deleteStepApi(this.step)
        },
        //请求后端删除用例步骤
        deleteStepApi(steps){
            http.delete('/mf/cases/'+ steps[0].caseId +'/steps', steps).then(res => {
                if (res.data.code){
                    this.$notify.info({
                        title: '结果',
                        message: res.data.message
                    });
                }
                setTimeout(() => {
                    window.location.reload()
                }, 1500);
            })
        },
        //显示添加用例步骤表单模态框
        showAddStepForm(){
            this.dialogVisible = true
        },

        //关闭模态框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },

        //添加用例步骤
        addCaseStep(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //判断操作与是否需要输入  是否对应
                    if (this.form.stepOperation === 'DRAG' || this.form.stepOperation === 'INPUT'){
                        if (this.form.isInput === false){
                            this.$message.error('选项不对应，请选择需要输入')
                            return false;
                        }
                    }
                    http.put('/mf/cases/steps', this.form).then(res => {
                        if (res.data.code === 200){
                            this.$message({
                                message: '添加步骤成功',
                                type: 'success'
                            });
                            //刷新页面
                            window.location.reload()
                        }else {
                            this.$message.error('添加失败')
                        }
                    })
                } else {
                    this.$message.error("提交表单失败")
                    return false;
                }
            });
        },

        //isInput属性布尔值回显
        formatBoolean(row, column, value){
            let ret = '';
            if (value){
                ret = 'true'
            }else{
                ret = 'false'
            }
            return ret;
        },
        //页数变化
        toPage(val){
            this.pageParams.page = val
            console.log(this.pageParams.page)
            http.get("/mf/cases/"+ this.form.caseId +"/steps?page=" + val).then(res => {
                if (res.data.code === 200){
                    this.stepList = res.data.data.caseStepVOS;
                }
            })
        },
        //返回上一级
        goBack(){
            this.$router.push({path:"/cases"})
        }
    },
    mounted(){
        let caseId = localStorage.getItem("caseId");
        http.get("/mf/cases/"+ caseId +"/steps").then(res => {
            if (res.data.code === 200){
                this.stepList = res.data.data.caseStepVOS
                this.pageParams.total = res.data.data.total
            }else{
                this.pageParams.total = res.data.data.total
            }
        })
    }
}

/**
 * 用例的结果集
 */
const caseReport = {
    template:
    `
    <div>
        <el-table :data="caseReport" :row-style="tableRowColor" style="width: 100%;" max-height="100%">
            <el-table-column prop="caseName" label="用例名称" width="200">
            </el-table-column>
            <el-table-column prop="caseDetail" label="用例详情" width="200">
            </el-table-column>
            <el-table-column prop="caseUrl" label="用例URL" width="280">
            </el-table-column>
            <el-table-column prop="caseResult" :formatter="formatBoolean" label="执行结果" width="150">
            </el-table-column>
            <el-table-column prop="admUserId" label="创建者ID" width="120">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable width="160">
            </el-table-column>
            <el-table-column prop="createTime" label="修改时间" sortable width="160">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="watchStepReport(scope.$index, caseReport)" type="text" size="small">
                        查看
                    </el-button>
                    <el-button @click.native.prevent="" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="pageParams.total"
          :current-page.sync="pageParams.page" :page-size="pageParams.pageSize"
          @current-change="toPage" @prev-click="toPage" @next-click="toPage">
        </el-pagination>
    </div>
    `,

    data(){
        return{
            pageParams:{   //分页参数实体
                page: 1,
                total: 100,
                pageSize: 8
            },
            bgColor:{
                background: 'oldlace'
            },
            caseReport:[], //用例列表
        }
    },
    methods:{
        //查看用例步骤
        watchStepReport(index, rows){
            localStorage.setItem("reportId", rows[index].reportId)
            localStorage.setItem("caseReportName", rows[index].caseName)
            this.$router.push({path:"/case/step/report"})
        },
        //表格行变色(执行结果false变红)
        tableRowColor({row, rowIndex}) {
            if (row.caseResult === false){
                return this.bgColor
            }
        },
        //用例结果布尔值回显
        formatBoolean(row, column, value){
            let ret = '';
            if (value){
                ret = 'true'
            }else{
                ret = 'false'
            }
            return ret;
        },
        //页数变化
        toPage(val){
            this.pageParams.page = val
            http.get('/mf/user/'+ 100101 +'/case-report?page=' + val).then(res => {
                if (res.data.code === 200){
                    this.caseReport = res.data.data.caseReportVOS;
                }
            })
        }
    },
    mounted() {
        http.get('/mf/user/'+ 100101 +'/case-report').then(res => {
            if (res.data.code){
                this.caseReport = res.data.data.caseReportVOS;
                this.pageParams.total = res.data.data.total;
            }
        })
    },
}

/**
 * 用例的步骤结果集
 */
const caseStepReport = {
    template:
    `
    <div>
        <div style="margin-left: 10px">
            <el-page-header style="line-height: 60px" @back="goBack" content="用例步骤结果表">
            </el-page-header>
            <h4>记录ID：<span v-text="reportId"></span>，用例名称：<span v-text="caseReportName"></span></h4>
        </div>
        <el-table :data="caseStepReports" style="width: 100%;" max-height="100%">
            <el-table-column fixed prop="stepId" label="步骤序号" width="80">
            </el-table-column>
            <el-table-column prop="stepName" label="步骤名称" width="120">
            </el-table-column>
            <el-table-column prop="stepXpath" label="Xpath表达式" width="200">
            </el-table-column>
            <el-table-column prop="stepOperation" label="步骤的操作" width="100">
            </el-table-column>
            <el-table-column prop="stepRelation" label="关联步骤" width="60">
            </el-table-column>
            <el-table-column prop="stepAmount" label="操作次数" width="60">
            </el-table-column>
            <el-table-column prop="stepParameter" label="操作参数值" width="120">
            </el-table-column>
            <el-table-column prop="stepJsonpath" label="Jsonpath表达式" width="120">
            </el-table-column>
            <el-table-column prop="isInput" :formatter="formatBoolean" :show-overflow-tooltip="true" label="是否需要输入" width="80">
            </el-table-column>
            <el-table-column prop="expectResult" label="预期结果" width="100">
            </el-table-column>
            <el-table-column prop="actualResult" label="实际结果" width="100">
            </el-table-column>
            <el-table-column prop="stepResDetail" label="结果描述" width="130">
            </el-table-column>
            <el-table-column prop="caseId" label="所处用例ID" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160">
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="160">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">    
                <template slot-scope="scope">
                    <el-button @click.native.prevent="" type="text" size="small">
                        编辑
                    </el-button>
                    <el-button @click.native.prevent="" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="pageParams.total"
          :current-page.sync="pageParams.page" :page-size="pageParams.pageSize"
          @current-change="toPage" @prev-click="toPage" @next-click="toPage">
        </el-pagination>
    </div>
    `,

    data() {
        return {
            pageParams:{   //分页参数实体
                page: 1,
                total: 100,
                pageSize: 8
            },
            caseStepReports: [],
            reportId: localStorage.getItem("reportId"),
            caseReportName: localStorage.getItem("caseReportName")
        }
    },
    methods: {
        //页数变化
        toPage(val){
            this.pageParams.page = val
            http.get('/mf/case-report/' + this.reportId +'/step-report?page=' + val).then(res => {
                if (res.data.code === 200){
                    this.caseStepReports = res.data.data.caseStepReportVOS;
                }
            })
        },
        //用例结果布尔值回显
        formatBoolean(row, column, value){
            let ret = '';
            if (value){
                ret = 'true'
            }else{
                ret = 'false'
            }
            return ret;
        },
        goBack(){
            this.$router.push({path:"/case-report"})
        }
    },
    mounted() {
        let reportId = localStorage.getItem("reportId")
        http.get('/mf/case-report/' + reportId +'/step-report').then(res => {
            if (res.data.code){
                this.caseStepReports = res.data.data.caseStepReportVOS;
                this.pageParams.total = res.data.data.total;
            }
        })
    },
}

/**
 * 404Page
 */
const errorPage = {
    template:
    `<div>404找不到页面</div>`
}

/**
 * 首页
 * @type {{template: string, data(): {value: *}}}
 */
const indexPage = {
    template:
    `<div>
        <h2 style="text-align: center">欢迎到自动化UI测试平台</h2>
        <el-calendar v-model="value">
        </el-calendar>
    </div>`,

    data() {
        return {
            value: new Date()
        }
    },
}

// const caseList = () => import('../component/case_list.vue');
/**
 * 路由注册
 */
const routes = [
    { path: '/cases', component: caseList },
    { path: '/case-form', component: caseForm },
    { path: '/case-step', component: caseStep},
    { path: '/case-report', component: caseReport},
    { path: '/case/step/report', component: caseStepReport},
    { path: '/case/detail', component: updateCaseForm},
    { path: '/', component: indexPage},
    { path: '*', component: errorPage}
]

const router = new VueRouter({
    mode: "hash",
    routes
})

const app = new Vue({
    router
}).$mount('#app')
